<template>
  <div v-loading="loading">
    <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px" @validate="isValidate=true">
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="学生姓名" prop="name">
            <el-input v-model="formData.name" placeholder="请输入学生姓名" maxlength="10" clearable :style="{width: '100%'}" />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="学院" prop="collegeId">
            <el-select v-model="formData.collegeId" placeholder="请选择学院" clearable :style="{width: '100%'}" @change="checkedCollege">
              <el-option
                v-for="(item, index) in collegeIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="年级" prop="grade">
            <el-input v-model="formData.grade" placeholder="请输入年级" maxlength="50" clearable :style="{width: '100%'}" />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="班级" prop="classId">
            <el-select v-model="formData.classId" placeholder="请选择班级" clearable :style="{width: '100%'}" :no-data-text="noDataText" @change="checkedClass">
              <el-option
                v-for="(item, index) in classIdOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="学号" prop="stuNum">
            <el-input v-model="formData.stuNum" placeholder="请输入学号" maxlength="20" clearable :style="{width: '100%'}" :disabled="isEdit!=''" />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="学历" prop="education">
            <el-select v-model="formData.education" placeholder="请选择学历" clearable :style="{width: '100%'}" @change="checkedEducation">
              <el-option
                v-for="(item, index) in educationOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="formData.phoneNumber" maxlength="11" placeholder="请输入手机号" clearable :style="{width: '100%'}" />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="formData.gender" size="medium" @change="checkedGender">
              <el-radio
                v-for="(item, index) in genderOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="formData.status" size="medium">
              <el-radio
                v-for="(item, index) in statusOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="入学时间" prop="enrollmentTime">
            <el-date-picker
              v-model="formData.enrollmentTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{width: '100%'}"
              placeholder="请选择入学时间"
              clearable
            />
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="出生日期" prop="birthday">
            <el-date-picker
              v-model="formData.birthday"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{width: '100%'}"
              placeholder="请选择出生日期"
              clearable
            />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="既往病史" prop="anamnesis">
            <el-input
              v-model="formData.anamnesis"
              type="textarea"
              placeholder="请输入既往病史"
              :maxlength="200"
              show-word-limit
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
              resize="none"
            />
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label-width="107px" label="心理诊断经历" prop="experience">
            <el-input
              v-model="formData.experience"
              type="textarea"
              placeholder="请输入心理诊断经历"
              :maxlength="200"
              show-word-limit
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
              resize="none"
            />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="服药情况" prop="medicationSituation">
            <el-input
              v-model="formData.medicationSituation"
              type="textarea"
              placeholder="请输入服药情况"
              :maxlength="200"
              show-word-limit
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
              resize="none"
            />
          </el-form-item>
        </div>
      </div>
      <div class="clearFloat">
        <div class="left">
          <el-form-item label="家庭情况" prop="familyInfo">
            <el-input
              v-model="formData.familyInfo"
              type="textarea"
              placeholder="请输入家庭情况"
              :maxlength="200"
              show-word-limit
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
              resize="none"
            />
          </el-form-item>
        </div>
        <div class="right">
          <el-form-item label="其他" prop="remark">
            <el-input
              v-model="formData.remark"
              type="textarea"
              placeholder="请输入其他"
              :maxlength="200"
              show-word-limit
              :autosize="{minRows: 4, maxRows: 4}"
              :style="{width: '100%'}"
              resize="none"
            />
          </el-form-item>
        </div>
      </div>
      <div class="button">
        <el-form-item>
          <el-button @click="closeAdd">取消</el-button>
          <el-button type="primary" @click="submitForm('formData')">确定</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import log from '@/views/monitor/job/log'
import { classList, collegeList } from '@/api/sdutent/Stulist'

export default {
  name: 'Index',
  inheritAttrs: false,
  props: {
    stuImformation: {
      type: Object,
      default: {}
    },
    isEdit: {
      type: String,
      default: ''
    },
    dialogTableVisibleAdd: Boolean
  },
  data() {
    var mobileTest = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!this.mobileRef.test(value)) {
        callback(new Error('手机号格式错误!'))
      } else {
        callback()
      }
    }
    var gradeTest = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入年级'))
      } else if ((!this.gradeRef.test(value))) {
        callback(new Error('年级只能是数字!'))
      } else {
        callback()
      }
    }
    var nameTest = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名!'))
      } else if ((this.nameRef.test(value))) {
        callback(new Error('姓名不能含有特殊字符!'))
      } else if ((this.punctuationRef.test(value))) {
        callback(new Error('姓名不能包含标点符号!'))
      } else {
        callback()
      }
    }
    return {
      // 电话正则
      mobileRef: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/,
      // 学生号正则
      stuNumRef: /^[0-9]{2}([0-9]|L){1}[0-9]{7}$/,
      // 年级正则
      gradeRef: /^[0-9]{1,}$/,
      // 姓名特殊符号
      nameRef: /[\x20-\x2F\x3A-\x40\x5B-\x60\x7B-\x7E]+/,
      // 姓名标点符号
      punctuationRef: /\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5/,
      noDataText: '请先选择学院',
      loading: false,
      isValidate: false,
      // 课程请求体
      query: {
        pageNum: 1,
        pageSize: 30,
        deptId: '',
        name: ''
      },
      formData: {
        name: '', // 姓名
        collegeId: '', // 学院
        grade: '', // 年级
        classId: '', // 班级
        stuNum: '', // 学号
        education: '', // 学历
        phoneNumber: '', // 手机号
        status: '', // 状态
        enrollmentTime: '', // 入学时间
        anamnesis: '', // 既往病史
        experience: '', // 心理诊断
        medicationSituation: '', // 服药情况
        familyInfo: '', // 家庭情况
        remark: '', // 其他
        psychometricTest: '', // 心理普测
        gender: '',
        birthday: ''
      },
      // 表单验证
      rules: {
        name: [{
          validator: nameTest,
          trigger: 'blur',
          required: true
        }
        ],
        collegeId: [{
          required: true,
          message: '请选择学院',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '请选择生日',
          trigger: 'blur'
        }],
        grade: [{ validator: gradeTest, trigger: 'blur', required: true }],
        classId: [{
          required: true,
          message: '请选择班级',
          trigger: 'blur'
        }],
        stuNum: [
          { required: true, message: '请输入学生学号', trigger: 'blur' },
          { min: 1, max: 20, message: '请输入学生学号(9-11位)', trigger: 'blur' }
        ],
        education: [{
          required: true,
          message: '请选择学历',
          trigger: 'blur'
        }],
        phoneNumber: [{ validator: mobileTest, trigger: 'blur', required: true }],
        status: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }],
        gender: [{
          required: true,
          message: '请选择性别',
          trigger: 'blur'
        }],
        enrollmentTime: [{
          required: true,
          message: '请选择入学时间',
          trigger: 'blur'
        }]
      },
      // 学院列表
      collegeIdOptions: [],
      // 课程列表
      classIdOptions: [],
      // 学历列表
      educationOptions: [
        {
          'label': '本科生',
          'value': '本科生'
        }, {
          'label': '研究生',
          'value': '研究生'
        }],
      // 状态列表
      statusOptions: [
        {
          'label': '正常',
          'value': '正常'
        }, {
          'label': '停用',
          'value': '停用'
        }],
      // 性别列表
      genderOptions: [
        {
          'label': '男',
          'value': '男'
        }, {
          'label': '女',
          'value': '女'
        }]
    }
  },
  watch: {
    dialogTableVisibleAdd: 'resetForm'
  },
  created() {
    // 请求学院列表
    collegeList().then(res => {
      if (res.code == 200) {
        res.data.forEach(item => {
          this.collegeIdOptions.push({ label: item.deptName, value: item.deptId })
        })
      }
    })
    this.Startedit()
  },
  methods: {
    // 选择学院
    checkedCollege(value) {
      this.noDataText = '请先选择学院'
      this.classIdOptions = []
      this.formData.classId = ''
      this.$refs['formData'].validateField('collegeId')
      if (value) {
        this.query.deptId = value
        this.getClassList(this.query)
      }
    },
    // 获取课程列表
    getClassList(query) {
      this.loading = true
      classList(query).then(res => {
        if (res.code == 200) {
          this.classIdOptions = []
          this.noDataText = '无数据'
          res.rows.forEach(item => {
            this.classIdOptions.push({ label: item.name, value: item.id })
          })
          this.loading = false
        }
      })
    },
    // 更改下拉菜单重启验证
    checkedClass() {
      this.$refs['formData'].validateField('classId')
    },
    checkedEducation() {
      this.$refs['formData'].validateField('education')
    },
    checkedGender() {
      this.$refs['formData'].validateField('gender')
    },
    // 保存
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.AddOK()
        } else {
          return false
        }
      })
    },
    // 重置表单，清除验证
    resetForm() {
      if (this.isValidate) {
        this.$refs['formData'].clearValidate()
      }
      this.Startedit()
    },
    // 添加学生取消按钮
    closeAdd() {
      this.$emit('closeAdd')
    },
    // AddOK
    AddOK() {
      if (!this.isEdit) {
        this.$emit('AddOK', this.formData)
      } else {
        this.$emit('editOK', this.formData)
      }
    },
    // 模态框出现
    Startedit() {
      if (this.isEdit) {
        this.query.deptId = this.stuImformation.collegeId
        this.getClassList(this.query)
        for (const key1 in this.stuImformation) {
          for (const key2 in this.formData) {
            if (key1 == key2) {
              this.formData[key2] = this.stuImformation[key1]
            }
          }
        }
        this.formData.id = this.stuImformation.id
        this.formData.nickname = this.stuImformation.nickname
        this.formData.avatar = this.stuImformation.avatar
        this.formData.password = this.stuImformation.password
      } else {
        for (const i in this.formData) {
          this.formData[i] = ''
        }
      }
    }
  }
}

</script>
<style scoped>
.clearFloat::after{
  content:"";
  display:block;
  clear:both;
}
.left {
  float: left;
  width: 49%;
  box-sizing: border-box;
}
.right {
  float: right;
  width: 49%;
  box-sizing: border-box;
}
.button {
  padding: 10px 0;
  text-align: center;
}
/deep/.el-textarea .el-input__count {
  background-color: transparent;
  bottom: -8px;
  right: 20px;
}
/deep/.el-textarea__inner{
  padding: 5px 15px 15px;
}
</style>

